import React,{useState , useEffect} from 'react'
import './index.less'
import Topone from '../../views/Topone'
import Toptwo from '../../views/Toptwo'
import Topthree from '../../views/Topthree'
import Botone from '../../views/Botone'
import Bottwo from '../../views/Bottwo'
import Botthree from '../../views/Botthree'
import { Radio, InputNumber } from 'antd';

export default function Index() {
  const [color, setcolor] = useState("#81CAFB")
  const [width, setwidth] = useState(window.outerWidth)
  const [height, setheight] = useState(window.outerHeight)
  const [reload, setreload] = useState(1000)
  const [scale,setscale]=useState("contain")
  useEffect(()=>{setTimeout(()=>{location.reload()},reload*1000)})


  return (
    <div className='aps'>
        <div className='head'>
            <h1 className='headtitle'>大屏图表适配解决方案</h1>
        </div>
        <div className="max">
            <div className="min">
                  <h3>tiobe计算机语言流行趋势</h3>
                  <Topone color={color}/>
            </div>
            <div className="min">
                  <h3>一周时间分布</h3>
                  <Toptwo color={color}/>
            </div>
            <div className="min">
                  <h3>一周时间分布</h3>
                  <Topthree color={color}/>
            </div>
        </div>
        <div className="max bottom">
            <div className="min">
                  <h3>面积图</h3>
                  <Botone color={color}/>
            </div>
            <div className="min">
                  <h3>当电脑坏了的的时候</h3>
                  <Bottwo color={color}/>
            </div>
            <div className="min">
                  <h3>当在网上找某首歌的时候</h3>
                  <Botthree color={color}/>
            </div>
        </div>
        {/* 左侧模态框 */}
        <div className='st'>
                <p>设计图</p>
                <p>
                    宽度:<InputNumber min={1} max={2000} defaultValue={width} onChange={(v) => setwidth(v)} />
                    高度:<InputNumber min={1} max={2000} defaultValue={height} onChange={(v) => setheight(v)} />
                </p>
                <p>配色方案</p>
                <Radio.Group onChange={(e) => setcolor(e.target.value)} value={color}>
                    <Radio value={"#81CAFB"} style={{ color: "white" }}>define</Radio>
                    <Radio value={"#FFA500"} style={{ color: "white" }}>spring</Radio>
                    <Radio value={"#AAEB28"} style={{ color: "white" }}>summer</Radio>
                    <Radio value={"#28B724"} style={{ color: "white" }}>autumn</Radio>
                    <Radio value={"#3CC4CE"} style={{ color: "white" }}>winter</Radio>
                </Radio.Group>
                <p>缩放模式</p>
                <Radio.Group onChange={(e)=>setscale(e.target.value)} value={scale}>
                    <Radio value={"contain"} style={{ color: "white" }}>contain</Radio>
                    <Radio value={"cover"} style={{ color: "white" }}>cover</Radio>
                    <Radio value={"stretch"} style={{ color: "white" }}>stretch</Radio>
                </Radio.Group>
                <br />
                自刷新:<InputNumber min={1} max={2000} defaultValue={reload} onChange={(v) => setreload(v)} />
                <br />
                <button onClick={() => {
                    if(scale=="contain"){
                        document.querySelector(".aps").style.overflow="visible"
                        if (width > 1450 ) {
                            document.querySelectorAll(".max")[0].style.width = "85vw"
                            document.querySelectorAll(".max")[1].style.width = "85vw"
                        } else if (width > 1350 ) {
                            document.querySelectorAll(".max")[0].style.width = "80vw"
                            document.querySelectorAll(".max")[1].style.width = "80vw"
                        } else if (width > 1150) {
                            document.querySelectorAll(".max")[0].style.width = "75vw"
                            document.querySelectorAll(".max")[1].style.width = "75vw"
                        } else if (width > 1050) {
                            document.querySelectorAll(".max")[0].style.width = "70vw"
                            document.querySelectorAll(".max")[1].style.width = "70vw"
                        } else if (width > 950) {
                            document.querySelectorAll(".max")[0].style.width = "65vw"
                            document.querySelectorAll(".max")[1].style.width = "65vw"
                        }
                        if (height > 800 ) {
                            document.querySelectorAll(".max")[0].style.height = "39vh"
                            document.querySelectorAll(".max")[1].style.height = "39vh"
                        } else if (height > 750) {
                            document.querySelectorAll(".max")[0].style.height = "36vh"
                            document.querySelectorAll(".max")[1].style.height = "36vh"
                        } else if (height > 700) {
                            document.querySelectorAll(".max")[0].style.height = "33vh"
                            document.querySelectorAll(".max")[1].style.height = "33vh"
                        } else if (height > 650) {
                            document.querySelectorAll(".max")[0].style.height = "30vh"
                            document.querySelectorAll(".max")[1].style.height = "30vh"
                        }
                    }else if(scale == "cover"){
                        document.querySelector(".aps").style.overflowY="scroll"
                        document.querySelectorAll(".max")[0].style.width = "90vw"
                        document.querySelectorAll(".max")[0].style.width = "90vw"
                        document.querySelectorAll(".max")[0].style.height = "60vh"
                        document.querySelectorAll(".max")[1].style.height = "60vh"
                    }else if(scale == "stretch"){
                        document.querySelector(".aps").style.overflowY="visible"
                        document.querySelectorAll(".max")[0].style.width = "100vw"
                        document.querySelectorAll(".max")[1].style.width = "100vw"
                        document.querySelectorAll(".max")[0].style.height = "50vh"
                        document.querySelectorAll(".max")[1].style.height = "50vh"
                        document.querySelectorAll(".min")[0].style.width = "30vw"
                        document.querySelectorAll(".min")[1].style.width = "30vw"
                        document.querySelectorAll(".min")[2].style.width = "30vw"
                        document.querySelectorAll(".min")[3].style.width = "30vw"
                        document.querySelectorAll(".min")[4].style.width = "30vw"
                        document.querySelectorAll(".min")[5].style.width = "30vw"
                    }
                
                }}>保存</button>
        </div>
    </div>
  )
}
